<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html" id="parent">
    <p:commandButton value="Create new item" oncomplete="PF('createNewDiag').show();"/>
    <p:commandButton value="Add row to item" oncomplete="PF('viewer').show();" update="expItemTitle"/>
     <p:commandButton value="Edit item" oncomplete="PF('editNewDiag').show();"/>
    <p:commandButton value="Edit Row" oncomplete="PF('editChildDiag').show();"/>
    <p:commandButton value="Print" type="button" icon="ui-icon-print" rendered="#{login.current.department.name eq 'Admin'}">
        <p:printer target="expTable" />
    </p:commandButton>
    <p:dataTable  id="expTable" var="res" value="#{expensesController.siteExpencesResources}" 
                  paginator="true" rows="100" 
                  paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" 
                  rowsPerPageTemplate="3,25,50,100,250,500"
                  emptyMessage="No Items Entered"
                  > 
        <f:facet name="header">  
            exp Doors Data

        </f:facet> 
        <p:columnGroup type="header">  
            <p:row>  
                <p:column rowspan="2" headerText="Item" />  
                <p:column colspan="11" headerText="Item Data" />  
            </p:row>  

            <p:row>  


                <p:column headerText="Job/Item" />  
                <p:column headerText="Quantity" />  
                <p:column headerText="Duration(month)" />  
                <p:column headerText="Paid Value" /> 
                <p:column headerText="Total" /> 
                <p:column headerText="Notes" />  



            </p:row>  
        </p:columnGroup> 
        <p:subTable var="stats" value="#{res.siteExpensesItemsList}" id="subTable1" >  
            <f:facet name="header">
                #{res.title}(#{res.code})

            </f:facet>  
            <p:column>  

            </p:column> 
            <p:column>  
                #{stats.job}
            </p:column> 
            <p:column>  
                #{stats.quantity}
            </p:column> 
            <p:column>  
                #{stats.duration}
            </p:column> 
            <p:column>  
                #{stats.wage}
            </p:column> 
            <p:column>  
                #{stats.total}  
            </p:column>  
            <p:column>  
                #{stats.notes}  
            </p:column>  

        </p:subTable>

    </p:dataTable>

    <p:dialog widgetVar="createNewDiag" header="Create New" dynamic="true" >
        <p:growl  id='expItemData' life="1500" showDetail="true"/>
        <p:panelGrid columns="2" id="newexpItem">

            <f:facet name="header">Item Data</f:facet>
            <p:outputLabel for="expTitle" value="Title"/>
            <p:inputText id="expTitle" value="#{expensesController.title}" required="true" requiredMessage="Title can't be empty"/>
            <p:outputLabel for="expCode" value="Code"/>
            <p:inputText id="expCode" value="#{expensesController.code}" required="true" requiredMessage="Code can't be empty"/>

            <f:facet name="footer">
                <p:commandButton process="newexpItem" value="Create" update="expTable,expItemData,expItemTitle" action="#{expensesController.save}" oncomplete="handleCreateRequest(xhr, status, args)"/>
            </f:facet>
        </p:panelGrid>
        <script type="text/javascript">
            function handleCreateRequest(xhr, status, args) {
                if (args.validationFailed) {
                    PF('createNewDiag').jq.effect("shake", {times: 5}, 100);
                }
                else {
                    PF('createNewDiag').hide();

                }
            }
        </script>
    </p:dialog>
    <p:dialog widgetVar="editNewDiag" header="Edit" dynamic="true" >
        <p:growl  id='editExpItemData' life="3000" showDetail="true"/>
        <p:outputPanel  styleClass="editItemPanel">
            <p:panel id="editExpItem"  style="overflow: auto">
                <p:fragment autoUpdate="true">
                    <p:panelGrid columns="2"  >
                        <p:outputLabel for="expitemToEdit" value="Edit Item"/>
                        <p:fragment autoUpdate="true">
                            <h:panelGrid columns="2">
                                <p:selectOneMenu id="expitemToEdit" value="#{expensesController.selectedResource}" required="true" converter="expensesConverter">
                                    <f:selectItems  var="resItem" value="#{expensesController.siteExpencesResources}"  itemLabel="#{resItem.title}" itemValue="#{resItem}"/>
                                </p:selectOneMenu>
                                <p:commandButton  process="@(#expitemToEdit)" value="Load Data" update="@(.editItemPanel)" />
                            </h:panelGrid>
                        </p:fragment>
                        <f:facet name="header">Item Data</f:facet>
                        <p:outputLabel for="expEditTitle" value="Title"/>
                        <p:inputText id="expEditTitle" value="#{expensesController.selectedResource.title}" required="true" requiredMessage="Title can't be empty"/>
                        <p:outputLabel for="expCode" value="Code"/>
                        <p:inputText id="expEditCode" value="#{expensesController.selectedResource.code}" required="true" requiredMessage="Code can't be empty"/>

                        <f:facet name="footer">
                            <p:commandButton process="editExpItem" value="Edit" update="expTable,editExpItemData,expItemTitle,expEditItemTitle" action="#{expensesController.updateItem()}" oncomplete="handleEditDataRequest(xhr, status, args)"/>
                        </f:facet>
                    </p:panelGrid>
                </p:fragment>

            </p:panel>
        </p:outputPanel>
        <script type="text/javascript">
            function handleEditDataRequest(xhr, status, args) {
                if (args.validationFailed) {
                    PF('editNewDiag').jq.effect("shake", {times: 5}, 100);
                }
                else {
                    PF('editNewDiag').hide();

                }
            }
        </script>
    </p:dialog>
    <p:dialog widgetVar="viewer" header="Edit" dynamic="true"  style="width: auto;" >
        <p:outputPanel  styleClass="editexpPanel">
            <p:growl  id='editexpData' life="1500" showDetail="true"/>

            <p:panel id="expItemTitle"  style="overflow: auto">
                <p:fragment autoUpdate="true">
                    <p:panelGrid columns="2"  >
                        <p:outputLabel for="expItems" value="Offer on Item"/>
                        <p:selectOneMenu id="expItems" value="#{expensesController.selectedResource}" required="true" converter="expensesConverter">
                            <f:selectItems  var="resItem" value="#{expensesController.siteExpencesResources}"  itemLabel="#{resItem.title}" itemValue="#{resItem}"/>
                        </p:selectOneMenu>

                        <p:outputLabel for="job" value="Job/Item"/>
                        <p:inputText id="job" value="#{expensesController.newItem.job}" required="true" requiredMessage="Job can't be empty"/>
                        <p:outputLabel for="duration" value="Duration(month)"/>
                        <p:inputText id="duration" value="#{expensesController.newItem.duration}" required="true" requiredMessage="Duration can't be empty"/>
                        <p:outputLabel for="quant" value="Quantity"/>
                        <p:inputText id="quant" value="#{expensesController.newItem.quantity}" required="true" requiredMessage="quantity can't be empty"/>
                        <p:outputLabel for="paid" value="Paid Value"/>
                        <p:inputText id="paid" value="#{expensesController.newItem.wage}" required="true" requiredMessage="Paid Value can't be empty"/>
                        <p:outputLabel for="expNotes" value="notes"/>
                        <p:inputText id="expNotes" value="#{expensesController.newItem.notes}" required="true" requiredMessage="Notes can't be empty"/>
                        <f:facet name="footer">
                            <p:commandButton process="@(.editexpData)" value="Create" update="expTable,@(.editexpPanel),editexpData" action="#{expensesController.saveData}" oncomplete="handleEditRequest(xhr, status, args);"/>
                        </f:facet>

                    </p:panelGrid>
                </p:fragment>

            </p:panel>


        </p:outputPanel>
        <script type="text/javascript">
            function handleEditRequest(xhr, status, args) {
                if (args.validationFailed) {
                    PF('viewer').jq.effect("shake", {times: 5}, 100);
                }
                else {
                    PF('viewer').hide();

                }
            }
        </script>
    </p:dialog>
 <p:dialog widgetVar="editChildDiag" header="Edit" dynamic="true"  style="width: auto;" >
        <p:outputPanel  styleClass="editChildPanel">
            <p:growl  id='editExpChildData' life="1500" showDetail="true"/>

            <p:panel id="expEditItemTitle"  style="overflow: auto">
                <p:fragment autoUpdate="true">
                    <p:panelGrid columns="2"  >
                        <p:outputLabel for="childExpitems" value="Row to Edit"/>
                        <p:fragment autoUpdate="true">
                            <h:panelGrid columns="2">

                                <p:selectOneMenu id="childExpitems" value="#{expensesController.editableItem}" required="true" converter="expDataConverter">
                                    <f:selectItems  var="resItem" value="#{expensesController.getChildResources()}"  itemLabel="#{resItem.job}" itemValue="#{resItem}"/>
                                </p:selectOneMenu>

                                <p:commandButton  process="@(#childExpitems)" value="Load Data" update="@(.editChildPanel)" />
                            </h:panelGrid>
                        </p:fragment>

                         <p:outputLabel for="jobEdit" value="Job/Item"/>
                        <p:inputText id="jobEdit" value="#{expensesController.editableItem.job}" required="true" requiredMessage="Job can't be empty"/>
                        <p:outputLabel for="durationEdit" value="Duration(month)"/>
                        <p:inputText id="durationEdit" value="#{expensesController.editableItem.duration}" required="true" requiredMessage="Duration can't be empty"/>
                        <p:outputLabel for="quantEdit" value="Quantity"/>
                        <p:inputText id="quantEdit" value="#{expensesController.editableItem.quantity}" required="true" requiredMessage="quantity can't be empty"/>
                        <p:outputLabel for="paidEdit" value="Paid Value"/>
                        <p:inputText id="paidEdit" value="#{expensesController.editableItem.wage}" required="true" requiredMessage="Paid Value can't be empty"/>
                        <p:outputLabel for="expNotesEdit" value="notes"/>
                        <p:inputText id="expNotesEdit" value="#{expensesController.editableItem.notes}" required="true" requiredMessage="Notes can't be empty"/>
                        <f:facet name="footer">
                            <p:commandButton process="@(.editChildPanel)" value="Create" update="expTable,@(.editChildPanel),editExpChildData" action="#{expensesController.updateChildItem()}" oncomplete="handleEditRequest(xhr, status, args);"/>
                        </f:facet>
                    </p:panelGrid>
                </p:fragment>
            </p:panel>
        </p:outputPanel>
        <script type="text/javascript">  
            function handleEditRequest(xhr, status, args) {
                if (args.validationFailed) {
                    PF('editChildDiag').jq.effect("shake", {times: 5}, 100);
                }
                else {
                    PF('editChildDiag').hide();

                }
            }
        </script>
    </p:dialog>
</ui:composition>

